<template>
    <div style="height: 100%; position: relative">
		<tab-control :tabs="tabLists" class="tab" :handleClick="handleClick"></tab-control>
		<router-view></router-view>
    </div>
</template>
<script>
import tabControl from "@/components/tabs/Tab";
export default {
    data() {
        return {
            activeName: '',
            tabLists: [
                // { label: '服务申请', name: 'application-list', component: () => import('./application-list.vue') },
            ]
        };
	},
	components: {
		tabControl
	},
    created() {
		/* this.tabs = this.$route.$parent.meta.tabs;
		this.activeName = this.tabs[0].name; */
		this.tabLists = this.$route.matched.slice(-2,-1)[0].meta.tabs;
    },
    methods: {
        addTab(label, name, component) {
            this.tabs.push({ label, name, component });
            this.activeName = name;
        },
        removeTab(targetName) {
            let tabs = this.tabs;
            let activeName = this.activeName;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }
            this.activeName = activeName;
            this.tabs = tabs.filter(tab => tab.name !== targetName);
        },
        handleClick(tab, event) {
            console.log(tab, event);
            /* this.activeName = tab.name;
            if (tab.index === "0") {
                this.tabs = [{ label: '积分订单', name: 'application-list', component: () => import('./application-list.vue') }]
            } */
        }
    }
};
</script>
<style lang="scss" scoped>
/* .admin-control-add {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
/deep/.el-drawer__body{
	overflow: auto;
	padding-bottom: 65px;
}
.demo-drawer__footer{
	position: absolute;
	bottom: 16px;
	left: 16px;
} */
</style>